<template>
  <div>
    <el-avatar
      v-if="role === '2'"
      class="user_image"
      shape="circle"
      :size="60"
      :src="user.image"
      @click.native="openUserInfo"
    />
    <el-drawer
      title="用户信息"
      :visible.sync="drawerVisibleFlag"
      direction="ltr"
      :before-close="handleClose"
    >
      <section class="userinfo_wrapper">
        <div class="image">
          <el-avatar
            shape="circle"
            :size="100"
            :src="user.image"
            style="box-shadow: 0 5px 5px 0 #999;"
          />
        </div>
        <div class="info">
          <div class="key">用户名称</div>
          <div class="value">{{ user.userName | handleEmpty }}</div>
        </div>
        <div class="info">
          <div class="key">联系方式</div>
          <div class="value">{{ user.phone | handleEmpty }}</div>
        </div>
        <div class="info">
          <div class="key">电子邮箱</div>
          <div class="value">{{ user.email | handleEmpty }}</div>
        </div>
        <div class="claim">
          <div class="title">已认领地块</div>
          <div
            v-for="(item) of places"
            :key="item.placeId"
            class="claim-place"
          >
            {{ item.placeName }}
            <el-tag style="cursor:pointer;" @click.native="routeTo(item.siteId, item.entId)">{{ item.siteName }}</el-tag>
          </div>
        </div>
        <el-button
          class="btn"
          type="primary"
          @click.native="logout"
        >
          退出登录
        </el-button>
      </section>
    </el-drawer>
  </div>
</template>

<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import { getInfo } from '@/api/user'
import { userGetClaim } from '@/api/claim'

export default {
  name: 'UserInfo',
  filters: {
    handleEmpty(value) {
      return value === '' ? '暂未录入！' : value
    }
  },
  props: {
    drawerVisibleFlag: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      drawer: true,
      role: store.getters.role,
      token: store.getters.token,
      user: {},
      messageList: {},
      places: []
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  mounted() {
    this.fetcchData()
  },
  methods: {
    fetcchData() {
      if (this.token) {
        this.getInfo()
        this.userGetClaim()
      }
    },
    getInfo() {
      getInfo(this.token)
        .then(response => {
          const user = response.accountInfo
          user.image = process.env.VUE_APP_BASE_IMAGE_API + 'userImage/' + user.image
          this.user = user
        })
        .catch(error => {
          console.log(error)
        })
    },
    userGetClaim() {
      userGetClaim({
        account: store.getters.token
      })
        .then(response => {
          this.places = response.places
          const plantations = response.plantations
          this.places.map((item, index) => {
            item.siteName = plantations[index].siteName
            item.entId = plantations[index].entId
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    formatTableValue() {
      const messageList = this.messageList
      this.tableValue = [{
        enterprise: messageList.unreadEnterprise,
        site: messageList.unreadPlantation,
        place: messageList.unreadPlace,
        account: messageList.unreadAccount,
        cms: messageList.unreadCms
      }, {
        enterprise: messageList.permitEnterprise,
        site: messageList.permitPlantation,
        place: messageList.permitPlace,
        account: messageList.permitAccount,
        cms: messageList.permitCms
      }, {
        enterprise: messageList.refuseEnterprise,
        site: messageList.refusePlantation,
        place: messageList.refusePlace,
        account: messageList.refuseAccount,
        cms: messageList.refuseCms
      }]
    },
    routeTo(siteId, entId) {
      console.log(111)
      this.$emit('route-to', siteId, entId)
    },
    openUserInfo() {
      this.$emit('open')
    },
    handleClose() {
      this.$emit('close')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$emit('refresh')
    }
  }
}
</script>

<style scoped lang="scss">
.user_image {
  position:absolute;
  top:20px;
  left: 20px;
  z-index: 10;
  cursor: pointer;
  box-shadow: 0 5px 5px 0 #999;
}

.userinfo_wrapper {
  min-height:100vh;
  padding:0 10px;
  position: relative;
  .image {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
  }
  .info {
    display:flex;
    align-items: center;
    padding:10px 0;
    font-size:18px;
    font-weight:lighter;
    color:#555;
    .value {
      padding-left:10px;
    }
  }
  .btn {
    width:95%;
    position:absolute;
    margin: 0 auto;
    left:0;
    right: 0;
    bottom:100px;
    box-sizing: border-box;
  }
}
.claim {
  font-size:14px;
  .title {
    font-weight:bolder;
    padding:10px 0;
  }
  .claim-place {
    padding: 8px 0;
    border-bottom:1px solid rgb(235,235,235)
  }
}

</style>
